<script setup lang="ts">
import { computed, ref } from "vue";
import { HistoryAlgorithm } from "../..";
import {
  getAlgorithmHistoryByPaperIDAPI,
  getAlgorithmHistoryTableDataByPaperIDAPI,
} from "../../api/paper.ts";
import { useRoute } from "vue-router";

const route = useRoute();
const id = route.params.id;
const results = ref<HistoryAlgorithm[]>([]);
const allFitness = ref<number[]>([]);
const maxFitness = ref<number[]>([]);
const averageFitness = ref<number[]>([]);
const c_maxFitness = ref<number[]>([]);
const c_averageFitness = ref<number[]>([]);

const isLoading = ref(true);

getAlgorithmHistoryByPaperIDAPI(parseInt(id))
  .then((response) => {
    if (response.status !== 200) {
      throw new Error("网络错误");
    }
    return response.data;
  })
  .then((result) => {
    // console.log(result.data);
    results.value = result.data.effects;
    isLoading.value = false;
    results.value = results.value.map((item) => {
      switch (parseInt(item.type)) {
        case 1:
          item.type = "随机抽取一次";
          break;
        case 2:
          item.type = "抽取多次取最优值";
          break;
        case 0:
          item.type = "遗传算法";
          break;
      }
      return item;
    });
  });
getAlgorithmHistoryTableDataByPaperIDAPI(parseInt(id))
  .then((response) => {
    if (response.status !== 200) {
      throw new Error("网络错误");
    }
    return response.data;
  })
  .then((result) => {
    allFitness.value = result.data.allFitness;
    maxFitness.value = result.data.maxFitness;
    averageFitness.value = result.data.averageFitness;
    c_maxFitness.value = result.data.c_maxFitness;
    c_averageFitness.value = result.data.c_averageFitness;
    console.log(allFitness.value, maxFitness.value);
  });
const data1 = computed(() => {
  return {
    // title: {
    //   text: "随机生成个体",
    //   left: "center",
    // },
    xAxis: {
      data: Array.from({ length: 100 }, (_, index) => index + 1),
      name: "迭代次数",
      nameLocation: "center",
      nameGap: 20,
    },
    yAxis: {
      type: "value",
      name: "适应度值",
    },
    legend: {
      data: ["最优适应度"],
    },
    series: [
      {
        data: allFitness.value,
        type: "line",
      },
    ],
  };
});
const data2 = computed(() => {
  return {
    // title: {
    //   text: "改进遗传算法",
    //   left: "center",
    // },
    tooltip: {
      show: true, // 是否显示
      trigger: "axis", // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
    },
    legend: {
      data: ["最优适应度", "平均适应度"],
    },
    xAxis: {
      data: Array.from({ length: 100 }, (_, index) => index + 1),
      name: "迭代次数",
      nameLocation: "center",
      nameGap: 20,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "最优适应度",
        data: c_maxFitness.value,
        type: "line",
        smooth: true,
      },
      {
        name: "平均适应度",
        data: c_averageFitness.value,
        type: "line",
        smooth: true,
      },
    ],
  };
});
const data3 = computed(() => {
  return {
    // title: {
    //   text: "传统遗传算法",
    //   left: "center",
    // },
    xAxis: {
      data: Array.from({ length: 100 }, (_, index) => index + 1),
      name: "迭代次数",
      nameLocation: "center",
      nameGap: 20,
    },
    yAxis: {
      type: "value",
    },
    legend: {
      data: ["最优适应度", "平均适应度"],
    },
    series: [
      {
        name: "最优适应度",
        data: maxFitness.value,
        type: "line",
        smooth: true,
      },
      {
        name: "平均适应度",
        data: averageFitness.value,
        type: "line",
        smooth: true,
      },
    ],
  };
});
</script>

<template>
  <div>
    <el-table
      :data="results"
      border
      stripe
      max-height="480"
      v-loading="isLoading"
    >
      <el-table-column prop="id" label="ID" width="50" />
      <el-table-column prop="paperid" label="试卷ID" />
      <el-table-column prop="type" label="类型" />
      <el-table-column prop="iterationnum" label="迭代次数" />
      <el-table-column prop="fitness" label="适应度" />
      <!--      <el-table-column prop="difficulty" label="困难度" />-->
    </el-table>
    <div>
      <v-chart :option="data1" class="chart-default" />
      <v-chart :option="data3" class="chart-default" />
      <v-chart :option="data2" class="chart-default" />
    </div>
  </div>
</template>

<style scoped>
.chart-default {
  width: 400px;
  height: 400px;
  display: inline-block;
  margin: 50px;
  padding: 50px;
}
</style>
